<template>
  <view class="container">
    <template v-if="list.length > 0">
      <view class="box"  v-for="(item,i) in list" :key="i">
        <view class="line line1" >
          <view class="p1">{{ item.userName }}</view>
          <view class="p2">消费金额(元)</view>
        </view>
        <view class="line line2">
          <view class="p1">邀请时间:{{ item.addTime }}</view>
          <view class="p2">￥{{item.orderAmount}}</view>
        </view>
      </view>
    </template>
    <empty v-if="list.length == 0" :isLoading="false" :custom-style="{ padding: '180rpx 50rpx' }" tips="暂无数据" />
  </view>
</template>

<script>
export default {
  data(){
    return{
      list:[]
    }
  },
  onShow(){
    this.getList();
  },
  methods: {
    getList() {
      this.$request.get('wx/invite/rewardList').then(res => {
        this.list = res.data.items;
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container{
  padding:  40rpx;
  background: #F7F7F7;
  min-height: 100vh;
  .box{
    border-radius: 10rpx;
    background: #FFF;
    padding: 26rpx 24rpx;
    margin-bottom: 20rpx;
    .line{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .line1{
      margin-bottom: 10rpx;
      .p1{
        font-size: 32rpx;
        font-weight: 500;
        color: #010812;
      }
      .p2{
        font-size: 24rpx;
        font-weight: 400;
        color: #6F6F6F;

      }
    }
    .line2{
      .p1{
        font-size: 24rpx;
        font-weight: 400;
        color: #6F6F6F;
      }
      .p2{
        font-size: 24rpx;
        font-weight: 500;
        color: #010812;
      }
    }
  }
}
</style>